import type { BasicColumn, ActionItem } from '../../Table';
import { FileItem, PreviewFileItem, UploadResultStatus } from './types/typing';
import { isImgTypeByName } from './helper';
import { Progress, Tag } from 'ant-design-vue';
import { TableAction } from '../../Table';
import ThumbUrl from './components/ThumbUrl.vue';

// 文件上传列表
export function createTableColumns(): BasicColumn[] {
	return [
		{
			dataIndex: 'thumbUrl',
			title: '缩略图',
			width: 100,
			customRender: ({ record }) => {
				const { thumbUrl } = (record as FileItem) || {};
				return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
			},
		},
		{
			dataIndex: 'name',
			title: '文件名',
			align: 'left',
			customRender: ({ text, record }) => {
				const { percent, status: uploadStatus } = (record as FileItem) || {};
				let status: 'normal' | 'exception' | 'active' | 'success' = 'normal';
				if (uploadStatus === UploadResultStatus.ERROR) {
					status = 'exception';
				} else if (uploadStatus === UploadResultStatus.UPLOADING) {
					status = 'active';
				} else if (uploadStatus === UploadResultStatus.SUCCESS) {
					status = 'success';
				}
				return (
					<span>
						<p class="truncate mb-1" title={text}>
							{text}
						</p>
						<Progress percent={percent} size="small" status={status} />
					</span>
				);
			},
		},
		{
			dataIndex: 'size',
			title: '文件大小',
			width: 100,
			customRender: ({ text = 0 }) => {
				return text && (text / 1024).toFixed(2) + 'KB';
			},
		},
		// {
		//   dataIndex: 'type',
		//   title: '文件类型',
		//   width: 100,
		// },
		{
			dataIndex: 'status',
			title: '状态',
			width: 100,
			customRender: ({ text }) => {
				if (text === UploadResultStatus.SUCCESS) {
					return <Tag color="green">{() => '上传成功'}</Tag>;
				} else if (text === UploadResultStatus.ERROR) {
					return <Tag color="red">{() => '长传失败'}</Tag>;
				} else if (text === UploadResultStatus.UPLOADING) {
					return <Tag color="blue">{() => '上传中'}</Tag>;
				}

				return text;
			},
		},
	];
}
export function createActionColumn(handleRemove: Function): BasicColumn {
	return {
		width: 120,
		title: '操作',
		dataIndex: 'action',
		fixed: false,
		customRender: ({ record }) => {
			const actions: ActionItem[] = [
				{
					title: '删除',
					icon: 'antd:DeleteOutlined',
					color: 'error',
					onClick: handleRemove.bind(null, record),
				},
			];
			return <TableAction actions={actions} outside={true} />;
		},
	};
}
// 文件预览列表
export function createPreviewColumns(): BasicColumn[] {
	return [
		{
			dataIndex: 'url',
			title: '缩略图',
			width: 100,
			customRender: ({ record }) => {
				const { url } = (record as PreviewFileItem) || {};
				return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
			},
		},
		{
			dataIndex: 'name',
			title: '文件名',
			align: 'left',
		},
	];
}

export function createPreviewActionColumn({
	handlePreview,
	handleRemove,
	handleDownload,
}: {
	handlePreview: Fn;
	handleRemove: Fn;
	handleDownload: Fn;
}): BasicColumn {
	return {
		width: 160,
		title: '操作',
		dataIndex: 'action',
		fixed: false,
		customRender: ({ record }) => {
			const actions: ActionItem[] = [
				{
					title: '预览',
					icon: 'antd:EyeOutlined',
					onClick: handlePreview.bind(null, record),
				},
				{
					title: '下载',
					icon: 'antd:DownloadOutlined',
					onClick: handleDownload.bind(null, record),
				},
				{
					title: '删除',
					color: 'error',
					icon: 'antd:DeleteOutlined',
					onClick: handleRemove.bind(null, record),
				},
			];

			return <TableAction actions={actions} outside={true} />;
		},
	};
}
